<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <el-card style="" body-style="padding: 13px 15px;">
            <el-form v-if="!state.loading" ref="formRef" :model="state" :rules="state.rules" label-position="top" :key="state.formKey">
                <el-row :gutter="24">
                    <el-col :span="6">
                        <div class="config-form-item">
                            <FormItem 
                                label="选择类型" 
                                type="select" 
                                v-model="state.type" 
                                prop="user_id" 
                                :data="{ content: { '0': '当天总计(汇总)', '1': '当天账单', '2': '未发货' } }"
                                placeholder="请选择类型" 
                                :clearable="false"
                                :input-attr="{clearable: false}"
                            />
                            
                        </div>
                    </el-col>

                    <el-col :span="6">
                        <div class="config-form-item">
                            <FormItem label="客户名称"  type="string" v-model="state.username" prop="anchor_name" placeholder="请输入客户名称" />
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="config-form-item" style="margin-bottom: 18px;">
                            <el-form-item label="日期范围">
                                <el-date-picker
                                v-model="state.daterange"
                                type="daterange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style=" width: 100%; margin-right: 12px;" 
                            />
                            </el-form-item>
                            
                        </div>
                    </el-col>
                    
                    <el-col :span="6" style="padding-left: 0;">
                        <div class="config-form-item">
                            <span class="btn ml-12" style="margin-top: 30.5px;" @click="query">查询</span>
                            <!-- <span class="btn ml-12 btn-success" style="margin-top: 31px;" @click="selectGoods">导出表格</span> -->
                        </div>
                    </el-col>
                    
                </el-row>
                
            </el-form>
        </el-card>
        <el-card style="margin-top: 20px;" body-style="padding: 13px 15px;" v-if="tableView.display">
            总金额：{{ tableView.supply_price_text }}&nbsp;&nbsp;&nbsp;&nbsp;
            <span v-for="(item, index) in tableView.data" :key="index">
                {{ item.label }}：{{ item.supply_price_text }}({{ item.num }}件)&nbsp;&nbsp;&nbsp;&nbsp;
            </span>
        </el-card>
        
        <div v-if="tableView.display">
            <el-card v-for="(item, index) in tableView.data" :key="index" style="background: #fff; padding: 0; margin-top: 20px;" body-style="padding: 0;">
                <el-alert
                    :closable="false"
                    :title="item.label"
                    type="info"
                    :description="'数量：' + item.num + '&nbsp;&nbsp;&nbsp;采购总价：' + item.supply_price_text + '&nbsp;&nbsp;&nbsp;总价：' + item.purchase_price_text"
                    show-icon
                />
                <el-table :data="item.info" border style="width: 100%;" max-height="500">
                    <el-table-column prop="brand_name" label="品牌名" width="100" align="center" />
                    <el-table-column prop="goods_cover" label="商品图" width="120" align="center">
                        <template #default="scope">
                            <div style="">
                                <el-image
                                    style="width: 100px; height: 100px"
                                    :src="scope.row.goods_cover"
                                    :zoom-rate="1.2"
                                    fit="contain"
                                    preview-teleported
                                    :previewSrcList="[scope.row.goods_cover]"
                                />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="username" label="客户名" align="center" />
                    <el-table-column prop="goods_name" label="商品名" align="center" />
                    <el-table-column prop="size" label="尺码" align="center" />
                    <el-table-column prop="price_text" label="原价" align="center" />
                    <el-table-column prop="supply_price_text" label="采购价格" align="center" width="85" />
                    <el-table-column prop="purchase_price_text" label="DC价格" align="center" />
                    <el-table-column prop="num" label="数量" align="center" />
                    <el-table-column prop="total_price_text" label="总价" align="center" />
                    <el-table-column prop="status_text" label="出货状态" align="center" width="90" />
                    <el-table-column prop="place_order_time_text" label="下单时间" align="center" width="105" />
                    <!-- <el-table-column prop="id" label="备注" /> -->
                </el-table>
            </el-card>
        </div>

        
        
    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import FormItem from '/@/components/formItem/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { billApi } from '/@/api/backend/bill/order';

defineOptions({
    name: 'bill/order',
})

const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

const state = reactive({
    type: '0',
    username: '',
    daterange: ''
})

const tableView = reactive({
    display: false,
    data: [],
    supply_price_text: 0,
    column: [{
        key: 'brand_name',
        dataKey: 'brand_name',
        title: '品牌名',
        width: 150,
    },{
        key: 'goods_cover',
        dataKey: 'goods_cover',
        title: '商品图',
        width: 150,
    },{
        key: 'username',
        dataKey: 'username',
        title: '客户名',
        width: 150,
    },{
        key: 'goods_name',
        dataKey: 'goods_name',
        title: '商品名',
        width: 150,
    },{
        key: 'color',
        dataKey: 'color',
        title: '颜色',
        width: 150,
    },{
        key: 'size',
        dataKey: 'size',
        title: '尺码',
        width: 150,
    },{
        key: 'price_text',
        dataKey: 'price_text',
        title: '品牌原价',
        width: 150,
    },{
        key: 'purchase_price_text',
        dataKey: 'purchase_price_text',
        title: '采购价格',
        width: 150,
    }]
})


const query = () => {
    console.log(state);
    billApi(state).then((e) => {
        console.log(e)
        tableView.data = e.data.list;
        tableView.supply_price_text = e.data.supply_price_text;
        tableView.display = true;
    })
}

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/goods.Brand/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            // { label: t('goods.brand.id'), prop: 'id', align: 'center', width: 70, operator: 'RANGE', sortable: 'custom' },
            { label: t('品牌名'), prop: 'name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', width: 240 },
            { 
                label: t('官方网站'), 
                prop: 'website', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false, 
                render: 'slot',
                slotName: 'website'
            },
            { 
                label: t('品牌风格'), 
                prop: 'style', 
                align: 'center',
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE',
                render: 'slot',
                slotName: 'style'
            },
            { label: t('goods.brand.suitable_age'), prop: 'suitable_age', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE',width: 110 },
            { 
                label: t('注册时间'), 
                prop: 'create_time', 
                align: 'center', 
                render: 'datetime', 
                operator: 'RANGE', 
                sortable: 'custom', 
                width: 160, 
                timeFormat: 'mm-dd/hh:MM'
            },
            
            // { label: t('goods.brand.person_in_charge'), prop: 'person_in_charge', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            // { label: t('goods.brand.contact'), prop: 'contact', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            // { label: t('goods.brand.update_time'), prop: 'update_time', align: 'center', render: 'datetime', operator: 'RANGE', sortable: 'custom', width: 160, timeFormat: 'yyyy-mm-dd hh:MM:ss' },
            
            // { label: t('goods.brand.style'), prop: 'style', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            // { label: t('goods.brand.suitable_age'), prop: 'suitable_age', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            // { label: t('goods.brand.logo'), prop: 'logo', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            // { label: t('goods.brand.test_image'), prop: 'test_image', align: 'center', render: 'image', operator: false },
            { label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: { name: null, supply_rate: null, person_in_charge: null, contact: null, website: null, style: null, suitable_age: null, logo: null, test_image: null },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">
:deep(.el-popper.is-customized) {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

:deep(.el-popper.is-customized .el-popper__arrow::before) {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>
